<template>
	<div class="version-container">
		<div v-for="(version, index) of versionList" :key="index" class="version">
			<el-form label-width="100px">
				<el-form-item label="版本名">
					<el-input type="text" v-model="version.name" class="name" :disabled="!version.isEdit" />
					<div class="left" v-show="!version.isEdit">
						<!-- <el-tooltip effect="dark" content="配置默认配方" placement="top-start">
							<el-button type="success" icon="el-icon-document" @click="handleOpenDialog(version)"
								circle />
						</el-tooltip> -->
						<el-tooltip effect="dark" content="编辑版本信息" placement="top-start">
							<el-button type="primary" icon="el-icon-edit" @click="version.isEdit = true" circle />
						</el-tooltip>
						<el-tooltip effect="dark" content="删除该版本" placement="top-start">
							<el-button type="danger" icon="el-icon-delete" @click="handleRemoveVersion(version.id)"
								circle />
						</el-tooltip>
					</div>
					<div class="left" v-show="version.isEdit">
						<el-tooltip effect="dark" content="保存" placement="top-start">
							<el-button type="success" icon="el-icon-check" @click="handleSaveVersion(version)" circle />
						</el-tooltip>
						<el-tooltip effect="dark" content="取消" placement="top-start">
							<el-button type="danger" icon="el-icon-close" @click="version.isEdit = false" circle />
						</el-tooltip>
					</div>
				</el-form-item>
				<el-form-item label="版本描述">
					<el-input type="textarea" :rows="4" v-model="version.description" :disabled="!version.isEdit" />
				</el-form-item>
			</el-form>
		</div>
		<div class="version">
			<div class="add" @click="handleAddVersion">
				<i class="el-icon-plus add_icon" size="80px"></i>
			</div>
		</div>
		<el-dialog title="默认原料配置" :visible.sync="visable" width="40%" :before-close="handleClose">
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="visable = false">取 消</el-button>
				<el-button type="primary" @click="visable = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "versionPage",
		data() {
			return {
				versionList: [],
				visable: false,
			};
		},
		methods: {
			handleAddVersion() {
				this.versionList.push({});
			},
			handleSaveVersion(version) {
				this.$api.post("/version/save", version).then((res) => {
					if (res.code == 0) {
						version.id = res.data.id;
						this.$message.success("保存成功");
					}
					version.isEdit = false;
				});
			},
			handleRemoveVersion(id) {
				if (id != undefined) {
					this.$api.post("/version/remove/" + id).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.message);
							this.versionList = this.versionList.filter((v) => v.id != id);
						} else this.$message.error(res.message);
					});
				} else this.$message.warning("请先保存该版本");
			},
			handleOpenDialog(version) {

			}
		},
		created() {
			this.$api.get('/version/list').then((res) => {
				var versions = res.data.versions;
				versions.forEach((value) => {
					value.isEdit = false;
				});
				this.versionList = versions;
				console.log(this.versionList);
			});
		},
	};
</script>

<style scoped>
	.version-container {
		width: 100%;
		height: 100%;
	}

	.version {
		border: 1px #c5c5c5 solid;
		border-radius: 10px;
		padding: 20px;
		margin: 10px;
		background-color: white;
	}

	.name {
		width: 60%;
		float: left;
	}

	.left {
		float: right;
	}

	.add {
		border: 1px rgba(0, 0, 0, 0.5) dashed;
		border-radius: 10px;
		padding: 10px;
		margin: 10px auto;
		width: 80px;
	}

	.add_icon {
		width: 80px;
		height: 80px;
		opacity: 0.2;
		margin: auto;
		font-size: 80px;
	}
</style>